<template>
  <el-main>
    <el-row class="search">
      <el-col :span="3">
        <el-input
          v-model="input"
          placeholder="请输入姓名/档案号"
          @change="searchenter"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" class="searchbtn" @click="searchbtn"
          >查询</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }"
        >
          <el-table-column prop="fileNumber" label="档案号" width="180">
          </el-table-column>
          <el-table-column prop="memberName" label="姓名" width="180">
          </el-table-column>

          <el-table-column prop="memberSex" label="性别"> </el-table-column>
          <el-table-column prop="memberAge" label="年龄"> </el-table-column>
          <el-table-column prop="memberPhone" label="手机号"> </el-table-column>
          <el-table-column prop="memberEmail" label="邮箱"> </el-table-column>
          <el-table-column prop="" label="建档时间">
            {{ tableData.memberCreated | dateFormat }}
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="updataIn(scope.$index, scope.row)"
                >指定方案</el-button
              >
              <!-- <el-button
                size="mini"
                type="danger"
                @click="showIn(scope.$index, scope.row)"
                >显示方案</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row class="page">
      <el-col :span="8" :offset="16">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="limit"
            :page-sizes="[5, 10, 30, 40, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(count)"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="确认分类" :visible.sync="dialogVisible" width="70%">
      <el-row>
        <el-col :span="10" :offset="1">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            class="dialogheight"
          >
            <el-tab-pane label="基本信息" name="first">
              <el-row class="information">
                <el-col :span="4" :offset="1">档案号：</el-col>
                <el-col :span="7" v-text="row.fileNumber"></el-col>
                <el-col :span="4" :offset="1">姓名：</el-col>
                <el-col :span="7" v-text="row.memberName"></el-col>
              </el-row>
              <el-row class="information">
                <el-col :span="4" :offset="1">性别：</el-col>
                <el-col :span="7" v-text="row.memberSex"></el-col>
                <el-col :span="4" :offset="1">年龄：</el-col>
                <el-col :span="7" v-text="row.memberAge"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">疾病史：</el-col>
                <el-col :span="18" v-text="row.bingshi"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">遗传史：</el-col>
                <el-col :span="18" v-text="row.jiazushi"></el-col>
              </el-row>
              <el-row class="information1">
                <el-col :span="4" :offset="1">过敏史：</el-col>
                <el-col :span="18" v-text="row.guominshi"></el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-tabs v-model="activeName1" class="dialogheight">
            <el-tab-pane label="基本信息" name="first">
              <el-row class="information">
                <el-col :span="4" :offset="1">档案号：</el-col>
                <el-col :span="7" v-text="row.fileNumber"></el-col>
                <el-col :span="4" :offset="1">姓名：</el-col>
                <el-col :span="7" v-text="row.memberName"></el-col>
              </el-row>
              <el-row class="information">
                <el-col :span="4" :offset="1">性别：</el-col>
                <el-col :span="7" v-text="row.memberSex"></el-col>
                <el-col :span="4" :offset="1">年龄：</el-col>
                <el-col :span="7" v-text="row.memberAge"></el-col>
              </el-row>

              <el-form
                ref="interveneForm"
                :model="interveneForm"
                :rules="rules"
                label-width="80px"
              >
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="选用模板">
                      <el-select
                        v-model="interveneForm.name"
                        placeholder="请选用选用模板"
                        @focus="findAllFormwork"
                        @change="CfindAllFormwork"
                      >
                        <el-option
                          v-for="item in interveneForm.findAllFormwork"
                          :label="item.title"
                          :value="item.id"
                          :key="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <el-form-item label="方案标题"  required prop="title">
                      <el-input v-model="interveneForm.title"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="开始日期" required>
                      <el-form-item prop="date1">
                        <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="interveneForm.date1"
                          style="width: 100%"
                          value-format="timestamp"
                        ></el-date-picker>
                      </el-form-item>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="1">

                  <el-form-item label="结束日期" required>
                      <el-form-item prop="date2">
                        <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="interveneForm.date2"
                          style="width: 100%"
                          value-format="timestamp"
                        ></el-date-picker>
                      </el-form-item>
                    </el-form-item>
                   
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="21">
                    <el-form-item label="方案目标" prop="target" required>
                      <el-input
                        v-model="interveneForm.target"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="10" >
                    <el-form-item label="推荐饮食" required prop="meal">
                      <el-input v-model="interveneForm.meal"></el-input>
                    </el-form-item>
                  </el-col>
                   <el-col :span="10" :offset="1">
                    <el-form-item label="推荐运动" required prop="sport" >
                      <el-input v-model="interveneForm.sport"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                 <el-row>
                  <el-col :offset="12" style="margin-top:20px">
                     <el-form-item>
                    <el-button @click="resetForm('interveneForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('interveneForm')">保存</el-button>
                   </el-form-item>
                  </el-col>
                 </el-row>
              </el-form>
            </el-tab-pane>
            
          </el-tabs>
          
        </el-col>
      </el-row>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      interveneForm: {
        name: "",
        findAllFormwork: {},
        date1: "",
        date2: "",
        title: "",
        target: "",
        meal:'',
        sport:'',
        id:''
      },
      rules:{
         date1: [
            { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
          ],
           target: [
            { required: true, message: '请选择目标', trigger: 'change' }
          ],
           meal: [
            { required: true, message: '请选择饮食', trigger: 'change' }
          ],
           sport: [
            { required: true, message: '请选择运动', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请选择标题', trigger: 'change' }
          ],
      },
      activeName1: "first",
      activeName: "first",
      dialogVisible: false,
      row: "",
      input: "",
      tableData: [],
      limit: 5,
      page: 1,
      count: "",
    };
  },
  methods: {
   

     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogVisible = false;
            this.$axios({
              url:"/intervene/add",
              method:'post',
              data:{'id':this.interveneForm.id,
                    'goal':this.interveneForm.target,
                    'ended':this.interveneForm.date2,
                    'sport':this.interveneForm.sport,
                    'meal':this.interveneForm.meal,
                    'started':this.interveneForm.date1,
                    'title':this.interveneForm.title,
}
            }).then(res=>{
              // console.log(res);
               this.$refs[formName].resetFields();
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
         this.dialogVisible = false;
        this.$refs[formName].resetFields();
      },

    CfindAllFormwork(e) {
      // console.log(e);
      this.$axios({
        url: "/intervene/useFormwork",
        method: "get",
        params: { id: e },
      }).then((res) => {
        // console.log(res);
        this.interveneForm.title = res.data.title;
        this.interveneForm.target = res.data.goal;
        this.interveneForm.sport=res.data.sport
        this.interveneForm.meal=res.data.meal
      });
    },
    findAllFormwork() {
      // console.log(111);
      this.$axios({
        url: "/intervene/findAllFormwork",
        method: "get",
      }).then((res) => {
        // console.log(res);
        this.interveneForm.findAllFormwork = res.data;
        
      });
    },

    handleClick() {},
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // console.log(this.input);
      if (this.input) {
        this.limit = val;
        this.searchname();
      } else {
        this.limit = val;
        this.InterveneList();
        // console.log(this.input);
      }
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      //   console.log(this.input);
      if (this.input) {
        this.page = val;
        this.searchname();
      } else {
        this.page = val;
        this.InterveneList();
      }
    },
    searchenter(val) {
      this.page = 1;
      this.input = val;
      this.searchname();
      // console.log(this.page);
    },
    searchbtn() {
      this.page = 1;
      this.searchname();
      // console.log(this.page);
    },
    // showIn(index, row) {
    //   // console.log(row.id);
    //   this.$axios({
    //     url:''
    //   })
    // },
    updataIn(index, row) {
      // console.log(row.id);
      this.interveneForm.id=row.id

      this.$axios({
        url: "/intervene/findMemberInfo",
        method: "get",
        params: { id: row.id },
      }).then((res) => {
        this.row = res.data;
        //  console.log(this.row);
      });

      this.dialogVisible = true;
      this.activeName = "first";
      this.activeName1 = "first";
    },
    InterveneList() {
      this.$axios({
        url: "/intervene/memberList",
        method: "post",
        data: { page: this.page, limit: this.limit },
      }).then((res) => {
        // console.log(res);
        this.count = res.count;
        this.tableData = res.data;
      });
    },
    searchname() {
      if (Number(this.input)) {
        this.$axios({
          url: "/intervene/memberList",
          method: "post",
          data: {
            fileNumber: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          // console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      } else {
        this.$axios({
          url: "/intervene/memberList",
          method: "post",
          data: {
            memberName: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          // console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      }
    },
  },
  created() {
    this.InterveneList();
  },
};
</script>

<style>
.dialogheight {
  height: 500px !important;
}
.search {
  margin-bottom: 30px;
}
.searchbtn {
  margin-left: 30px;
}
.page {
  margin-top: 30px;
}
.block {
  font-size: 20px;
}
.information {
  margin-bottom: 30px;
}
.information1{
  height: 110px;
}
</style>